<!DOCTYPE html>
<html>
<head>
<title>DICOM Generator</title>
<meta charset="UTF-8">
<script type="text/javascript" src="../../src/dicom/dicomParser.js"></script>
<script type="text/javascript" src="../../src/dicom/dicomWriter.js"></script>
<script type="text/javascript" src="../../src/dicom/dictionary.js"></script>
<script type="text/javascript">
// tags file
var _tagsFile = null;
// generate DICOM data
function generate()
{
    // check validity
    if (!isValidTags()) {
        return;
    }

    // get tags from the textarea
    var tags = JSON.parse(document.getElementById('tags').value);
    // optional pixel generator (cannot be propagated)
    var pixelGenerator = "gradSquare";
    if ( typeof tags.PixelData !== "undefined" ) {
        pixelGenerator = tags.PixelData;
        delete tags.PixelData;
    }
    // convert JSON to DICOM element object
    var res = dwv.dicom.getElementsFromJSONTags(tags);
    var dicomElements = res.elements;
    // pixels: small gradient square
    dicomElements.x7FE00010 = null;
    try {
        dicomElements.x7FE00010 = dwv.dicom.generatePixelDataFromJSONTags(
            tags, res.offset, pixelGenerator);
    } catch (error) {
        console.error(error);
        alert(error.message);
    }

    // create writer
    var writer = new dwv.dicom.DicomWriter();
    var dicomBuffer = null;
    try {
        dicomBuffer = writer.getBuffer(dicomElements);
    } catch (error) {
        console.error(error);
        alert(error.message);
    }
    // view as Blob to allow download
    var blob = new Blob([dicomBuffer], {type: 'application/dicom'});
    // update generate button
    var element = document.getElementById("generate");
    element.download = "dwv-generated.dcm";
    element.href = URL.createObjectURL(blob);
}
// save the tags as a JSON file
function saveTags()
{
    // check validity
    if (!isValidTags()) {
        return;
    }
    // get text from the textarea
    var text = document.getElementById('tags').value;
    // view as Blob to allow download
    var blob = new Blob([text], {type:"text/plain"});
    // update save button
    var element = document.getElementById("save");
    console.log(_tagsFile);
    element.download = (_tagsFile === null ? "tags.json" : _tagsFile.name);
    element.href = URL.createObjectURL(blob);
}
// is the JSON valid?
function isValidTags()
{
    try {
        JSON.parse(document.getElementById('tags').value);
    }
    catch (error) {
        alert("The JSON is not valid, please check it with JSONLint.");
        return false;
    }
    return true;
}
// open JSONLint to check the tags
function launchJSONlint()
{
    var text = document.getElementById('tags').value;
    var link = "http://jsonlint.com/?json=" + encodeURIComponent(text);
    window.open(link);
}
// handle input tags file
function onInputTagsFile(event)
{
    if (event.target.files.length === 0) {
        return;
    }
    _tagsFile = event.target.files[0];
    var reader = new FileReader();
    reader.onload = function (event) {
        document.getElementById('tags').value = event.target.result;
    };
    reader.readAsText(_tagsFile);
}
</script>
<style>
body { font-family: Arial, Helvetica, sans-serif; }
textarea { width: 99%; margin: 2px; }
fieldset { background: whitesmoke; border: 1px solid grey; }
.button {
    padding: 3px 7px 3px 7px;
    text-align: center;
    border-radius: 3px;
    border: 1px solid grey;
    text-decoration: none;
    font: 80% sans-serif;
    color: black;
    background: #E3E3E3;
}
.button-active {
    color: black;
    background: #E3E3E3;
}
.button-disabled {
    color: grey;
    background: #F3F3F3;
}
.button:hover {
    border: 1px solid black;
}
</style>
</head>

<body>

<h1>DWV DICOM Generator</h1>

<p>Simple DICOM data generator from json tags.
Mainly used for generating test data, <b>use at your own risks!</b>
<br>No need for a 'FileMetaInformationGroupLength', it is calculated automatically.
Values should not be <code>null</code>...
<br>Sequences have an optional <code>explicitLength</code> boolean parameter to write them
and all their elements with implicit or explicit length. Its default value is <code>true</code>.
Set as <code>{}</code>, a sequence will
be written with explicit zero length, a <code>0</code> value will mean implicit length.
</p>

<form name="genform">

<fieldset>
<label for="intagsfile">JSON DICOM tags file: </label>
<input id="intagsfile" type="file" name="file" onchange="onInputTagsFile(event);">
</fieldset>

<textarea id="tags" rows="25">
{
  "TransferSyntaxUID": "1.2.840.10008.1.2.1",
  "Modality": "MR",
  "PatientName": "dwv-patient-name",
  "PhotometricInterpretation": "MONOCHROME2",
  "SamplesPerPixel": 1,
  "PlanarConfiguration": 0,
  "PixelRepresentation": 0,
  "Rows": 32,
  "Columns": 32,
  "BitsAllocated": 16,
  "BitsStored": 12,
  "HighBit": 11,
  "ReferencedImageSequence": {
    "explicitLength": true,
    "item0": {
      "ReferencedSOPClassUID": "1.2.840.10008.5.1.4.1.1.4",
      "ReferencedSOPInstanceUID": "1.3.12.2.1107.5.2.32.35162.2012021515511672669154094"
    },
    "item1": {
      "ReferencedSOPClassUID": "1.2.840.10008.5.1.4.1.1.4",
      "ReferencedSOPInstanceUID": "1.3.12.2.1107.5.2.32.35162.2012021515511286933854090"
    }
  }
}
</textarea>

<fieldset>
<a href="#" id="jsonlint" class="button" onclick="launchJSONlint();">JSONLint</a>
<a href="#" id="save" class="button" onclick="saveTags();">Save Tags</a>
<a href="#" id="generate" class="button" onclick="generate();">Generate</a>
</fieldset>
</form>

</body>
</html>
